<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Required Stylesheets -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/fluid.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/mws.style.css" media="screen"/>
    <!-- Theme Stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/mws.theme.css" media="screen"/>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/mws.js"></script>
    <script type="text/javascript" src="js/xiaoqiang.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <title>XiaoQiang-UI</title>
</head>
<body>
<!-- Header Wrapper -->
<div id="mws-header" class="clearfix">
    <!-- Logo Wrapper -->
    <div id="mws-logo-container">
        <div id="mws-logo-wrap"><a href="https://github.com/leo-zz/XiaoQiang">
            <img src="images/logo.png" alt="XiaoQiangLogo"/></a>
        </div>
    </div>
    <!-- User Area Wrapper -->
    <div id="mws-user-tools" class="clearfix">
        <div id="mws-github">
            <a href="https://github.com/leo-zz/XiaoQiang" target="_blank"><img
                    src="./images/github.png" alt="GitHub" width="46"></a>
        </div>
    </div>
</div>
<!-- Main Wrapper -->
<div id="mws-wrapper">
    <!-- Necessary markup, do not remove -->
    <div id="mws-sidebar-stitch"></div>
    <div id="mws-sidebar-bg"></div>
    <!-- Sidebar Wrapper -->
    <div id="mws-sidebar">
        <!-- Main Navigation -->
        <div id="mws-navigation">
            <ul>
                <li><a href="javascript:void();">主机监控</a>
                    <ul class="navList">
                        <li class="active"><a href="javascript:void();">主机信息监控</a></li>
                        <li><a href="javascript:void();">JVM内存监控</a></li>
                        <li><a href="javascript:void();">类与线程监控</a></li>
                        <li><a href="javascript:void();">GC监控</a></li>
                        <li><a href="javascript:void();">方法异常监控</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- End Navigation -->
    </div>
    <!-- Container Wrapper -->
    <div id="mws-container" class="clearfix">
        <!-- Main Container -->
        <div class="container">
            <!--XiaoQiang 客户端列表-->
            <div class="mws-panel grid_8 mws-collapsible">
                <div class="mws-panel-header">
                    <span id="clientName">XiaoQiang 客户端列表---请先选择需要监控的客户端</span>
                </div>
                <div class="mws-panel-body">
                    <table class="mws-table">
                        <thead>
                        <tr>
                            <th>客户端名称</th>
                            <th>IP地址</th>
                            <th>端口号</th>
                            <th>上次通信时间</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody id="clientlist">
                    </table>
                </div>
            </div>
            <!--JVM信息-->
            <div class="mws-panel grid_8 mws-collapsible">
                <div class="mws-panel-header">
                    <span>JVM信息</span>
                </div>
                <div class="mws-panel-body">
                    <table class="mws-table">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>操作系统</th>
                            <th>编译器</th>
                            <th>启动时间</th>
                            <th>JVM参数</th>
                            <th>启动类路径</th>
                            <th>普通类路径</th>
                        </tr>
                        </thead>
                        <tbody id="jvmInfo">
                    </table>
                </div>
            </div>
        </div>
        <div class="container contentType">
            <!--2:主机监控-->
            <div class="contentType_list">
                <!--CPU使用率%-->
                <div class="mws-panel grid_4">
                    <div class="mws-panel-header">
                        <span>CPU使用率%</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="cpu" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
                <!--主机内存使用率-->
                <div class="mws-panel grid_4">
                    <div class="mws-panel-header">
                        <span>主机内存使用率%</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="hostMemRatio" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
            </div>

            <!--3:JVM内存监控-->
            <div class="contentType_list">
                <!--JVM内存信息-->
                <div class="mws-panel grid_8">
                    <div class="mws-panel-header">
                        <span>JVM内存信息</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="jvmMem" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
                <!--堆内存信息-->
                <div class="mws-panel grid_4">
                    <div class="mws-panel-header">
                        <span>堆内存信息</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="heapMem" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
                <!--非堆内存信息-->
                <div class="mws-panel grid_4">
                    <div class="mws-panel-header">
                        <span>非堆内存信息</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="nonHeapMem" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--4:类与线程监控-->
            <div class="contentType_list">
                <div class="mws-panel grid_4">
                    <div class="mws-panel-header">
                        <span>类信息</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="class" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
                <div class="mws-panel grid_4">
                    <div class="mws-panel-header">
                        <span>线程信息</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="thread" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--5:GC监控-->
            <div class="contentType_list">
                <div class="mws-panel grid_4">
                    <div class="mws-panel-header">
                        <span>GC次数信息</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="gcCount" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
                <div class="mws-panel grid_4">
                    <div class="mws-panel-header">
                        <span>GC耗时信息</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="gcTime" style="width:100%; height:300px; "></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--6:方法异常监控-->
            <div class="contentType_list">
                <div class="mws-panel grid_8">
                    <div class="mws-panel-header">
                        <span>异常信息</span>
                    </div>
                    <div class="mws-panel-body">
                        <div class="mws-panel-content">
                            <div id="exChart" style="width:100%; height:600px; "></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Main Container -->
    </div>
    <!-- End Container Wrapper -->
</div>
<!--XiaoQiang 客户端列表详情-->
<div class="shadow"></div>
<div class="clientCon">
    <div class="clientTitle">客户端详情
        <span class="clientClose">x</span>
    </div>
    <div class="clientInfo" id="clientInfo">

    </div>
</div>
<!--离线提示信息-->
<div class="clientOffline">
    <p>当前服务器已离线</p>
</div>
<script type='text/javascript'>

    //能够手动切换client信息
    var clientInet = "";
    var instanceName = "";
    var timer;

    var displatFlag = false;

    $(function () {
        /*导航内容切换*/
        $(".contentType>div").eq(0).show().siblings().hide();
        $(".navList>li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $(this).index();
            $(".contentType>div").eq(index).show().siblings().hide();
        })
        /*关闭弹窗*/
        $('.clientClose').click(function () {
            $('.shadow').hide();
            $('.clientCon').hide();
        });

        /*表格行点击事件,用来更新客户端信息*/
        $("#clientlist").on("click", "tr", function () {
            var td = $(this).find("td");
            var clientName = td.eq(0).text();
            var clientAddress = td.eq(1).text();
            var clientPort = td.eq(2).text();
            var clientStatus = td.eq(4).text();
            var cn = $("#clientName");


            if (clientStatus == "在线") {
                cn.html("");
                var clientTitle =
                    "XiaoQiang 客户端列表---当前监控" + clientName + ""
                cn.append(clientTitle);
                instanceName = clientName;
                clientInet = "http://" + clientAddress + ":" + clientPort + "/";
                alert("开始监控客户端：" + instanceName);
                xqDisplay(jvmInfo);
                displatFlag = true;
            } else {
                $('.clientOffline').show();
                setTimeout(function () {
                    $('.clientOffline').hide();
                }, 3000)
            }
        });
    })

    /*请求clientlists查询接口，填充表格内容 */
    var clientContent = fillClientInfo();
    $("#clientlist").html(clientContent);
    var jvmInfo = $("#jvmInfo");

    // 基于准备好的dom，初始化echarts实例
    var cpuChart;
    var hostMemChart;
    var jvmChart;
    var heapChart;
    var nonHeapChart;
    var classChart;
    var threadChart;
    var gcCountChart;
    var gcTimeChart;
    var exChart;
    chartsInit();

    //创建参数
    //CPU信息
    var cpuData = [];
    var jvmCpuData = [];
    var availableProcessors;
    //主机内存信息 hostMemRatio
    var physicalMemoryRatio = [];
    var swapSpaceRatio = [];
    var physicalMemory;
    var swapSpace;
    //JVM内存情况
    var heapUsedMemory = [];
    var heapCommittedMemory = [];
    var nonHeapUsedMemory = [];
    var nonHeapCommittedMemory = [];
    var committedVirtualMemory = [];
    //堆内存情况 heapMem
    var edenSpaceUsedMemory = [];
    var survivorSpaceUsedMemory = [];
    var oldGenUsedMemory = [];
    //非堆内存情况 nonHeapMem
    var codeCacheUsedMemory = [];
    var metaspaceUsedMemory = [];
    var compressedClassSpaceUsedMemory = [];
    //类信息
    var loadedClassCount = [];
    var totalLoadedClassCount;
    var unloadedClassCount;
    //线程信息
    var threadCount = [];
    var deadlockedThreadsNum = [];
    var monitorDeadlockedThreadsNum = [];
    var peakThreadCount;
    var totalStartedThreadCount;
    //GC信息
    var ygcName;
    var ygcMemoryPoolNames;
    var ogcName;
    var ogcMemoryPoolNames;
    var ygcCount = [];
    var ygcTime = [];
    var ogcCount = [];
    var ogcTime = [];
    //其他信息
    var bootClassPath;
    var classPath;
    var jvmName;
    var osName;
    var compilerName;
    var inputArguments;
    var jvmStartTime;


</script>

</body>
</html>
